<template>
    <div>
        <h1>bigData</h1>
        <button @click="ajaxData">初始化数据</button>
        <ul style="content-visibility: auto">
            <li style="content-visibility: auto" v-for="(item, index) in users" :key="index">
                <div>
                    <div>姓名： {{ item.userName }}</div>
                    <div>年龄 {{ item.info.age }}</div>
                    <div>地址 {{ item.info.address }}</div>
                    <div>职位 {{ item.ext.level }}</div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'BigData',
    components: {},
    data() {
        return {
            message: 'Hello, Vue 3!',
            users: [],
            items: ['Item 1', 'Item 2', 'Item 3' /* ... */],
            tableData: [
                {
                    date: '2023-01-02',
                    name: '大伟聊前端',
                    address: '北京',
                    age: 18
                },
                {
                    date: '2023-01-04',
                    name: '大伟聊前端',
                    address: '北京',
                    age: 18
                },
                {
                    date: '2023-01-01',
                    name: '大伟聊前端',
                    address: '北京',
                    age: 18
                },
                {
                    date: '2023-01-03',
                    name: '大伟聊前端',
                    address: '北京',
                    age: 18
                }
            ]
        };
    },
    methods: {
        ajaxData() {
            const res = [];
            for (let i = 0; i < 10000; i++) {
                res.push({
                    id: i,
                    userName: `大伟聊前端${i}`,
                    info: {
                        age: 18,
                        address: '中国--北京'
                    },
                    ext: {
                        date: new Date(),
                        office: '字节跳动',
                        level: '前端开发',
                        blog: 'abc.com',
                        like: {
                            name: '篮球'
                        }
                    }
                });
            }
            this.users = res;
            console.log(this.users);
            return res;
        }
    }
};
</script>
